<template>
  <div>
    <div class="marquee-wrap">
      <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
        <li v-for="item in arr" :key="item">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onUnmounted } from 'vue';

export default {
  setup() {
    const obj = reactive({
      arr: [
        "********已获奖金60元",
        "********已获奖金40元",
        "************ 成功邀请1人 已获奖金5元",
      ],
      count: 0,
      animateUp: false,
    });

    const props = {
      time: 2000,
      textTime: 500,
    };

    let timer = null;

    const scrollAnimate = () => {
      obj.animateUp = true;
      setTimeout(() => {
        obj.arr.push(obj.arr[0]);
        obj.arr.shift();
        obj.animateUp = false;
      }, props.textTime);
    };

    timer = setInterval(scrollAnimate, props.time);

    onUnmounted(() => {
      clearInterval(timer);
    });

    return {
      ...toRefs(obj),
    };
  },
};
</script>

<style scoped>
.marquee-wrap {
  width: auto;
  height: 40px;
  border-radius: 20px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
 /* background: rgba(255, 255, 255, 1);*/
  background: #2196F3;
  margin: 0 auto;
  overflow: hidden;
}

.marquee-list {
  li {
    width: 100%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 20px;
    list-style: none;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
  }
}

.animate-up {
  transition: all 0.5s ease-in-out;
  transform: translateY(-40px);
}
</style>
